@import '../../../globalThemesConfig/utils';

.common-component-theme-skinning {
  position: fixed;
  right: var(--default-box-theme-margin);
  top: calc(20vh + 60px);
  background: transparent;
  z-index: var(--default-position-layer-tiny);

  .common-component-skinning-settings {
    font-size: 50px;
    transition: 0.5s;
    opacity: 0.2;
    color: @themeColor6;
  }
  .common-component-skinning-settings:hover {
    transform: rotate(135deg);
    opacity: 1;
  }
}

.common-component-theme-skinning-drawer-content {
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: var(--default-box-theme-padding);
  height: 100%;

  .common-component-theme-skinning-theme-color {
    .common-component-theme-skinning-list {
      display: flex;
      flex-flow: wrap;
      justify-content: space-around;
      align-items: baseline;

      .common-component-theme-skinning-list-warp {
        text-align: center;
        font-size: 12px;
        padding: 10px 0;
        cursor: pointer;
        width: 67px;
      }
    }
  }

  .common-component-theme-skinning-theme-demo {

  }
}

.mixinGetScrollbarStyle(common-component-theme-skinning-drawer-content);
